<template>
  <div class="webheart knowledge-detail" ref="sss">
    <KnowledgeMain v-if="knowledgeData" :knowledgeData="knowledgeData" />
    <div class="courseItem-wrap">
      <div class="courseItem-list">
        <el-row :gutter="20">
          <el-col :span="18">
            <KnowledgeIntro
              v-if="knowledgeData"
              :knowledgeData="knowledgeData"
            />
            <!-- 资源文件 -->
            <div ref="resource-wrap" v-if="isShowFileList">
              <Resource
                :knowledgeData="knowledgeData"
                :knowledgeFilesList="knowledgeFilesList"
              />
            </div>
            <!-- 评价 -->
            <Review
              v-if="knowledgeId"
              :courseId="courseId"
              :knowledgeId="knowledgeId"
              type="1"
              resType="2"
            />
          </el-col>
          <el-col :span="6">
            <Mark
              v-if="knowledgeData"
              :knowledgeData="knowledgeData"
              :courseId="courseId"
              :knowledgeId="knowledgeId"
            />
            <!-- 相关推荐 -->
            <KnowledgeRecommend />
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>
<script>
import { getSession, removeSession } from '@/utils/session'
// import { openApiSysKnowledgeQuery } from '@/api/openApi'
import { sysKnowledgeQueryById } from '@/api/admin/course/sysKnowledge.js'
import { queryKnowledgeFilesByKnowledgeId } from '@/api/admin/course/sysKnowledgeFiles.js'
export default {
  components: {
    KnowledgeRecommend: () => import('./Recommend.vue'),
    KnowledgeMain: () => import('./KnowledgeMain.vue'),
    KnowledgeIntro: () => import('./KnowledgeIntro.vue'),
    Resource: () => import('@/components/resource/index.vue'),
    Review: () => import('@/components/review/index.vue'),
    Mark: () => import('./Mark.vue'),
  },
  data() {
    return {
      courseId: '',
      knowledgeId: '',
      knowledgeData: null,
      fullscreenLoading: false,
      knowledgeFilesList: [],
      isShowFileList: false, //数据回来再显示附件
    }
  },
  watch: {
    $route() {
      this.openFullScreen1()
      this.getInfo()
    },
  },
  mounted() {
    this.getInfo()
    this.pageScroll()
  },
  methods: {
    async getInfo() {
      this.isShowFileList = false
      this.knowledgeId = this.$route.query.id
      if (!this.knowledgeId) return
      let { id, queryMode } = this.$route.query
      let res = await sysKnowledgeQueryById(id)
      this.knowledgeData = res.data.data[0]
      this.$store.commit('SET_KNOWLEDGE', this.knowledgeData)
      this.courseId = this.knowledgeData.courseId

      let resFile = await queryKnowledgeFilesByKnowledgeId(id)
      this.knowledgeFilesList = resFile.data.data
      this.isShowFileList = true

      // openApiSysKnowledgeQuery({ id, queryMode }).then((res) => {
      //   // console.log(res)
      //   this.knowledgeData = res.data.data[0]
      //   this.$store.commit('SET_KNOWLEDGE', this.knowledgeData)
      //   this.courseId = this.knowledgeData.sysKnowledgeChapterList[0].courseId
      // })
    },
    pageScroll() {
      let type = getSession('fileType')
      if (!type) return
      setTimeout(() => {
        if (!this.$refs['resource-wrap']) return
        let h = this.$refs['resource-wrap'].getBoundingClientRect().top - 70
        document.body.scrollTop = document.documentElement.scrollTop = h
      }, 200)
    },
    openFullScreen1() {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(255, 255, 255, 0.9)',
      })
      setTimeout(() => {
        loading.close()
      }, 300)
    },
  },
  beforeDestroy() {
    removeSession('fileType')
  },
}
</script>
<style scoped>
.knowledge-detail {
  padding-bottom: 30px;
}
.courseItem-list .el-card__body {
  padding: 0px;
}
</style>